<template>
    <div class="classic">
      <mt-header fixed class="head" title="旗袍分类">
        <router-link to="/home" slot="left">
          <mt-button icon="" class="iconfont">&#xe615;</mt-button>
        </router-link>
        <router-link to="/groupcar" slot="right" icon="">
          <mt-button class="iconfont buy">&#xe600;</mt-button>
        </router-link>
      </mt-header>
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide><img src="../../assets/img/banner1.jpg" /></swiper-slide>
        <swiper-slide><img src="../../assets/img/banner2.jpg" /></swiper-slide>
        <swiper-slide><img src="../../assets/img/banner3.jpg" /></swiper-slide>
        <!-- 分页器 -->
        <div class="swiper-scrollbar"  slot="pagination"></div>
      </swiper>
      <ul class="list">
        <li class="list-item"><img src="../../assets/img/sort1.png" /><img class="img" src="../../assets/img/sorttxt1.png" /></li>
        <li class="list-item"><img src="../../assets/img/sort2.png" /><img class="img" src="../../assets/img/sorttxt2.png" /></li>
        <li class="list-item"><img src="../../assets/img/sort3.png" /><img class="img" src="../../assets/img/sorttxt3.png" /></li>
        <li class="list-item"><img src="../../assets/img/sort4.png" /><img class="img" src="../../assets/img/sorttxt4.png" /></li>
        <li class="list-item"><img src="../../assets/img/sort5.png" /><img class="img" src="../../assets/img/sorttxt5.png" /></li>
        <li class="list-item"><img src="../../assets/img/sort6.png" /><img class="img" src="../../assets/img/sorttxt6.png" /></li>
        <li class="list-item"><img src="../../assets/img/sort7.png" /><img class="img" src="../../assets/img/sorttxt7.png" /></li>
        <li class="list-item"><img src="../../assets/img/sort8.png" /><img class="img" src="../../assets/img/sorttxt8.png" /></li>
        <li class="list-item"><img src="../../assets/img/sort9.png" /><img class="img" src="../../assets/img/sorttxt9.png" /></li>
      </ul>
      <img class="last" src="../../assets/img/banner6.jpg" /></div>
</template>

<script>
    export default {
      data(){
        return{
          swiperOption: {
            loop:true,
            autoplay: {
              delay: 3000,
              stopOnLastSlide: true,
              disableOnInteraction: false,
            }, //自动播放
            pagination: {
              el: '.swiper-scrollbar', //滚动条
            }
          }
        }
      },
        name: "Classic"
    }
</script>

<style scoped lang="stylus">
  .classic
    .last
      width: 100%
      vertical-align: top
      margin-bottom: 3.2rem
    .list
      display flex
      justify-content space-around
      flex-wrap wrap
      .list-item
        width: 30%
        img.img
          margin-bottom: .5rem
        img
          vertical-align: top
          margin-bottom: .2rem
          width: 100%
    .swiper
      margin-top: 2rem
      img
        vertical-align top
        width: 100%
        height: 100%
        margin-bottom: .8rem
    .head
      z-index 2
      display flex
      background: #581513
</style>
